<template>
 <div class="yingmoo-list">
    <ym-header></ym-header>
    <ym-medianav></ym-medianav>
    <ym-detailsnav></ym-detailsnav>
<!--  当前定位  -->
    <div class="locat">
      <img src="../assets/ym-list/dw.png" />
      <p>
        当前位置：
        <span>鹰目户外广告> </span>
        <span class="text">{{areaName}}</span>
        <span v-if="areaName!=''">></span>
        <span class="text">{{cate1Name}}</span>
        <span v-if="cateName!=''">></span>
        <span class="text">{{cateName}}</span>
      </p>
    </div>
<!--  搜索导航  -->
    <div class="search-nav">
      <div class="ul" @click="shox=1">
        <p>媒体分类：</p>
        <ul>
          <li v-for="cate in mediaCate" :key="cate" @click="getCateList(cate.value),addMediaCode(cate.text,cate.value)" style="cursor: pointer;">{{cate.text}}</li>
        </ul>
      </div>
      <div class="ul" v-show="shox==1">
        <p>媒体类别：</p>
        <ul>
          <li v-for="cate2 in mediaCate2" :key="cate2" @click="addTag(cate2.text,cate2.value)" style="cursor: pointer;">{{cate2.text}}</li>
        </ul>
      </div>
      <div class="ul">
        <p>区域选择：</p>
        <ul>
          <li v-for="pro in province" :key="pro" @click="addAreaCode(pro.text,pro.value)" style="cursor: pointer;">{{pro.text}}</li>
        </ul>
        <span class="sel" @click="she=1,change()"><img src="../assets/ym-header/arrows.png" /></span>
        <!--<div class="select" v-show="she==1" @mouseleave="she=0">
          <li v-for="pro in province" @click="addAreaCode(pro.text,pro.value)" style="cursor: pointer;">{{pro.text}}</li>
          <li v-for="pro in province" @click="addAreaCode(pro.text,pro.value)" style="cursor: pointer;">{{pro.text}}</li>
        </div>-->
      </div>
      <div class="searches">
        <div class="search-text">
          <img src="../assets/ym-details/search.png" />
          <input v-model="key" type="text" />
        </div>
        <div class="search" @click="searchByKey" style="cursor: pointer;">关键字搜索</div>
      </div>
      <div class="search-condition">
        <p>搜索条件</p>
        <el-tag
          v-for="tag in tags"
          :key="tag.name"
          :closable=true
          :type="tag.type">
          {{tag.name}}
        </el-tag>
      </div>
    </div>
<!--  默认顺序、点击量、创建时间  -->
    <div class="tab">
      <ul class="tab-nav">
        <li @mouseenter='shos=1'>默认顺序</li>
        <li @mouseenter='shos=0,shon=1'>点击量</li>
        <li @mouseenter='shos=0,shon=0,shom=1'>创建时间</li>
      </ul>
    </div>
<!--  列表模板  -->
    <div class="list-models">
      <div class="model-left">
        <div class="list-model" v-for="media in mediaList" :key="media">
          <a :href="media.linkUrl" target="_blank">
          	<img width="304px" height="200px" :src="media.cover" />
          </a>
          <div class="firm-name" :title="media.companyName">
          	<a :href="media.linkUrl" target="_blank" style="color: white;">{{media.companyName}}</a>
          </div>
          <div class="name">
          	<h4>{{media.media_name}}</h4>
<!--        <p>公司名称： <span>{{media.mediaCompanyName}}</span></p>-->
            <p>媒体分类： <span>{{media.category}}</span></p>
            <p>免费咨询热线： <span class="colors">400-650-7893</span></p>
            <p>刊例价： <span class="colors">{{media.prices}}{{media.light_style_id}}</span></p>
            <button class="hot" @click="addAttention(media.media_id),tur()" :class="{'hot-color':tru}">关注</button>
            <button class="shop" @click="addToCart(media.media_id,media.mediaType)">加入购物车</button>
          </div>
          <div class="locats">
            <p>地区： <span>{{media.area}}</span></p>
            <p class="map-text"><img src="../assets/ym-list/earth.png" /><span>地图</span></p>
          </div>
        </div>
      </div>

      <div class="model-right">
        <div class="hot">
          <h4>热门媒体</h4>
          <div class="small-model" v-for="hot in hotMediaList" :key="hot">
            <img width="225px" height="147px" :src="hot.cover" />
            <p :title="hot.mediaName">{{hot.mediaName}}</p>
            <p class="price" :title="hot.prices">价格：￥{{hot.prices}}</p>
            <p class="path" :title="hot.address">位置：{{hot.address}}</p>
          </div>
        </div>
        <div class="about-media">
          <h4>媒体相关店铺</h4>
          <div class="company" v-for="shop in relatedShop" :key="shop">
            <img width="222px" height="198px" :src="shop.contentLicense"/>
            <p :title="shop.contentCorp">{{shop.contentCorp}}</p>
          </div>
        </div>
        <div class="about-nav">
          <h4>相关导航<span>换一组</span></h4>
          <p>福州LED大屏广告    扬州商住楼宇媒体广告    济南公交站牌灯箱广告   延安机场大牌大牌广告    <span>南京机场大牌广告</span>    武汉机场大牌广告    北京LED广告    沈阳LED大屏广告    深圳户外广告    地铁广告报价    北京户外广告    成都户外广告    平凉看板广告    佳木斯立柱单立柱广告    成都机场大牌广告    佳木斯立柱单立柱广告    成都机场大牌广告</p>
        </div>
      </div>
    </div>
<!--  分页器  -->
    <div class="paging">
      <el-pagination
      	@current-change="getMediaList(currentPage3,15)"
        :current-page.sync="currentPage3"
        :page-size="15"
        background
        layout="total,prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

<!--  推荐媒体  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">推荐媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="media in recommentMedia" :key="media">
          <dt>
          	<a :href="media.linkUrl" target="_blank">
            <img width="222px" height="145px" :src="media.cover" />
            </a>
          </dt>
          <dd class="media-text-first" :title="media.mediaName">{{media.mediaName}}</dd>
          <dd class="media-text-secend">￥{{media.prices}}{{media.lightStyleId}}</dd>
          <!--<dd class="media-text-city">{{n.modelcity}}<span>{{n.modellook}}</span></dd>-->
        </dl>
      </div>
    </div>
   <ym-detailsfooter></ym-detailsfooter>
 </div>
</template>
<script>
import ymHeader from "@/components/ymHeader.vue";
import ymMedianav from "@/components/ymMedianav.vue";
import ymDetailsfooter from "@/components/ymDetailsfooter.vue";
import ymDetailsnav from "@/components/ymDetailsnav.vue";
export default {
  name: "yingmoo-list",
  components: {
    ymHeader,
    ymMedianav,
    ymDetailsnav,
    ymDetailsfooter
  },
  data() {
    return {
      requestAddr: this.GLOBAL.addr,
      user: {},
      shos: 1,
      shon: 0,
      shom: 0,
      tru: true,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      total: 0,
      mediaCate: [],
      mediaCate2: [],
      mediaList: [],
      hotMediaList: [],
      relatedShop: [],
      shoplist: [],
      recommentMedia: [],
      cate1Name: "",
      cateName: "",
      areaName: "",
      province: [],
      tags1: [],
      tags2: [],
      tags: [],
      params: {},
      key: "",
      she: 0,
      shox: 0,
      param: null,
      showCate: {}
    };
  },
  mounted() {
    this.getMediaList(1, 15);
    this.getCateList("");
    this.getCateList("1001");
    this.getAreaList("");
  },
  methods: {
    tur: function() {
      this.tru = !this.tru;
    },
    getMediaList: function(offset, limit) {
      this.user = JSON.parse(window.localStorage.getItem("user"));
      this.params = JSON.parse(sessionStorage.getItem("params"));
      this.params.offset = (offset - 1) * limit;
      this.params.limit = limit;
      this.currentPage3 = offset;
      this.$http
        .post(this.requestAddr + "/GetJson/getMediaList", this.params, {
          emulateJSON: true
        })
        .then(res => {
          this.mediaList = res.data.mediaList;
          console.log(this.mediaList);
          this.total = res.data.total;
          this.hotMediaList = res.data.hotMedia;
          this.relatedShop = res.data.relatedShop;
          this.recommentMedia = res.data.recommentMedia;
          for (var i = 0; i < this.mediaList.length; i++) {
            this.mediaList[i].create_time = this.dateConvertor(
              this.mediaList[i].create_time
            );
            this.mediaList[i].linkUrl =
              "http://172.16.10.4:7000/html/mediaData/" +
              this.mediaList[i].create_time +
              "/" +
              this.mediaList[i].media_id +
              ".html";
          }
          for (var i = 0; i < this.recommentMedia.length; i++) {
            this.recommentMedia[i].createTime = this.dateConvertor(
              this.recommentMedia[i].createTime
            );
            this.recommentMedia[i].linkUrl =
              "http://172.16.10.4:7000/html/mediaData/" +
              this.recommentMedia[i].createTime +
              "/" +
              this.recommentMedia[i].mediaId +
              ".html";
          }
        });
    },
    //添加关注
    addAttention: function(id) {
      this.$http
        .post(
          this.requestAddr + "/GetJson/addAttention",
          { userId: this.user.autoId, mediaId: id, type: 1 },
          { emulateJSON: true }
        )
        .then(res => {
          if (res.data.code == 0) {
            alert(res.data.msg);
          }
        });
    },
    //添加到我的购物车
    addToCart: function(id, type) {
      this.$http
        .post(
          this.requestAddr + "/GetJson/addToCart",
          { advertiserId: this.user.autoId, mediaId: id, mediaType: type },
          { emulateJSON: true }
        )
        .then(res => {
          if (res.data.code == 0) {
            alert(res.data.msg);
          }
        });
    },
    //获取分类信息
    getCateList: function(code) {
      this.$http
        .post(
          this.requestAddr + "/GetJson/getCategoryList",
          { parentCode: code },
          { emulateJSON: true }
        )
        .then(res => {
          if (code == null || code == "") {
            this.mediaCate = res.data.result;
          } else if (code != null && code.length == 4) {
            this.mediaCate2 = res.data.result;
          }
          for (var i = 0; i < this.mediaCate.length; i++) {
            if (
              this.params.categoryCode.substring(0, 4) ==
              this.mediaCate[i].value
            ) {
              this.cate1Name = this.mediaCate[i].text;
            }
          }
          for (var i = 0; i < this.mediaCate2.length; i++) {
            if (this.params.categoryCode == this.mediaCate2[i].value) {
              this.cateName = this.mediaCate2[i].text;
            }
          }
        });
    },
    //获取地区列表
    getAreaList: function(areaCode) {
      this.$http
        .post(
          this.requestAddr + "/GetJson/getAreaList",
          { parentCode: areaCode },
          { emulateJSON: true }
        )
        .then(res => {
          if (areaCode == null || areaCode == "") {
            this.province = res.data.result;
          } else if (areaCode != null && areaCode.length == 4) {
            this.citys = res.data.result;
          } else {
            this.areas = res.data.result;
          }
          for (var i = 0; i < this.province.length; i++) {
            if (this.params.mediaArea == this.province[i].value) {
              this.areaName = this.province[i].text;
            }
          }
        });
    },
    addTag: function(text, value) {
      if (value.length == 4) {
        this.tags1 = [];
        this.cate1Name = text;
        this.cateName = "";
      } else {
        this.cateName = text;
      }
      this.tags = [];
      var tag = {
        name: text,
        type: "warning"
      };
      this.tags1.push(tag);
      this.tags.push.apply(this.tags, this.tags1);
      this.tags.push.apply(this.tags, this.tags2);
      this.params.offset = 1;
      this.params.limit = 15;
      this.currentPage3 = 1;
      this.search();
    },
    addMediaCode: function(text, value) {
      this.params.categoryCode = value;
      this.addTag(text, value);
    },
    addAreaCode: function(text, value) {
      this.areaName = text;
      this.tags2 = [];
      this.tags = [];
      var tag = {
        name: text,
        type: "warning"
      };
      this.tags2.push(tag);
      this.tags.push.apply(this.tags, this.tags1);
      this.tags.push.apply(this.tags, this.tags2);
      this.params.mediaArea = value;
      this.search();
    },
    //关键字搜索
    searchByKey: function() {
      this.params.key = this.key;
      this.search();
    },
    search: function() {
      console.log(this.params);
      this.$http
        .post(this.requestAddr + "/GetJson/getMediaList", this.params, {
          emulateJSON: true
        })
        .then(res => {
          this.mediaList = res.data.mediaList;
          this.total = res.data.total;
          this.hotMediaList = res.data.hotMedia;
          this.relatedShop = res.data.relatedShop;
          this.recommentMedia = res.data.recommentMedia;
        });
    },
    dateConvertor: function(dateTime) {
      var date = new Date(dateTime);
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var dd = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var str = date.getFullYear() + "/" + month + "/" + dd;
      return str;
    }
  }
};
</script>

<style scoped>
.el-tag {
  margin-right: 10px;
}
</style>

<style scoped lang="less">
.yingmoo-list {
  width: 100%;
  background-color: #f3f9ff;
  .locat {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    img {
      width: 10px;
      height: 14px;
      margin-top: 19px;
      margin-right: 5px;
    }
    p {
      font-size: 12px;
      line-height: 50px;
      color: #666666;
      font-weight: bold;
      span {
        font-weight: 1;
      }
      .text {
        color: #f29600;
      }
    }
  }
  .search-nav {
    width: 1200px;
    margin: 0 auto;
    .ul {
      width: 1200px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      background-color: white;
      margin-top: 15px;
      display: flex;
      position: relative;
      p {
        width: 135px;
        height: 40px;
        background-color: #036eb7;
        color: white;
      }
      ul {
        width: 1040px;
        li {
          padding-left: 16px;
          padding-right: 17px;
          float: left;
          color: #666666;
        }
      }
      .sel {
        cursor: pointer;
      }
      .select {
        width: 1065px;
        position: absolute;
        top: 40px;
        padding-left: 135px;
        background-color: white;
        li {
          padding-left: 16px;
          padding-right: 17px;
          float: left;
          color: #666666;
          list-style: none;
        }
      }
    }
    .searches {
      width: 420px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      background-color: white;
      margin: 12px 0 12px 0;
      .search-text {
        width: 315px;
        height: 40px;
        display: flex;
        img {
          width: 27px;
          height: 26px;
          margin: 8px 0 0 10px;
        }
        input {
          width: 280px;
          height: 38px;
          border: none;
          outline: none;
          padding-left: 10px;
          font-size: 14px;
        }
      }
      .search {
        width: 105px;
        height: 40px;
        background-color: #f29600;
        line-height: 40px;
        color: white;
        text-align: center;
      }
    }
    .search-condition {
      display: flex;
      p {
        font-size: 16px;
        font-weight: bold;
        color: #666666;
        line-height: 30px;
        margin-right: 10px;
      }
    }
  }
  .tab {
    width: 1200px;
    margin: 20px auto;
    .tab-nav {
      display: flex;
      width: 1200px;
      height: 40px;
      background-color: white;
      li {
        width: 135px;
        height: 40px;
        border: 1px solid #e6e6e6;
        color: #666666;
        line-height: 40px;
        text-align: center;
        background-color: white;
        &:hover {
          color: white;
          background-color: #036eb7;
          border: 1px solid #036eb7;
        }
        &:nth-child(1) {
          border-right: none;
        }
        &:nth-child(2) {
          border-right: none;
        }
      }
    }
  }
  .list-models {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .model-left {
      .list-model {
        width: 950px;
        height: 200px;
        background-color: white;
        display: flex;
        margin-bottom: 20px;
        position: relative;
        .firm-name {
          width: 304px;
          position: absolute;
          bottom: 0px;
          height: 30px;
          line-height: 30px;
          background-color: black;
          opacity: 0.6;
          overflow: hidden;
          text-overflow: clip;
          text-align: center;
          cursor: default;
          color: white;
        }
        .name {
          width: 290px;
          height: 200px;
          margin-left: 25px;
          padding-top: 15px;
          h4 {
            font-weight: bold;
            margin-bottom: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p {
            font-size: 14px;
            line-height: 30px;
            color: #999999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .colors {
              color: #f29600;
              font-weight: bold;
            }
            span {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          button {
            width: 130px;
            height: 40px;
            border: none;
            font-size: 14px;
            margin-top: 15px;
          }
          .hot {
            background-color: #e6e6e6;
            color: #999999;
            background-image: url(../assets/ym-details/hot.png);
            background-repeat: no-repeat;
            background-position: 30% center;
            text-align: center;
            padding-left: 30px;
            cursor: pointer;
            &:hover {
              background-image: url(../assets/ym-details/hot-hover.png);
              color: #f29600;
            }
          }
          .hot-color {
            background-color: #e6e6e6;
            background-image: url(../assets/ym-details/hot-hover.png);
            color: #f29600;
            background-repeat: no-repeat;
            background-position: 30% center;
            text-align: center;
            padding-left: 30px;
          }
          .shop {
            background-color: #f29600;
            color: white;
            background-image: url(../assets/ym-details/shop.png);
            background-repeat: no-repeat;
            background-position: 15% center;
            text-align: center;
            padding-left: 30px;
            cursor: pointer;
            &:hover {
              background-color: #bf7d1f;
            }
          }
        }
        .locats {
          margin-top: 50px;
          p {
            font-size: 14px;
            line-height: 30px;
            color: #999999;
            width: 280px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .colors {
              color: #f29600;
              font-weight: bold;
            }
          }
          .map-text {
            span {
              position: relative;
              top: -15px;
            }
          }
        }
      }
    }
    .model-right {
      width: 225px;
      height: 770px;
      .hot {
        h4 {
          font-size: 20px;
          border-bottom: 3px solid #036eb7;
          line-height: 38px;
          color: #036eb7;
          font-weight: bold;
        }
        .small-model {
          width: 225px;
          height: 230px;
          background-color: white;
          margin-top: 20px;
          img {
            width: 100%;
          }
          p {
            height: 25px;
            font-size: 15px;
            color: #333333;
            line-height: 25px;
            overflow: hidden;
            text-overflow: clip;
            padding-left: 10px;
          }
          .price {
            font-size: 13px;
            color: #f29600;
          }
          .path {
            font-size: 13px;
            color: #999999;
          }
        }
      }
      .about-media {
        margin-top: 25px;
        h4 {
          font-size: 20px;
          border-bottom: 3px solid #036eb7;
          line-height: 38px;
          color: #036eb7;
          font-weight: bold;
        }
        .company {
          width: 222px;
          height: 238px;
          text-align: center;
          border: 1px solid #dddddd;
          margin-top: 20px;
          p {
            height: 40px;
            line-height: 40px;
            border-top: 1px solid #dddddd;
            color: #333333;
            overflow: hidden;
            text-overflow: clip;
          }
        }
      }
      .about-nav {
        margin-top: 20px;
        h4 {
          font-size: 20px;
          border-bottom: 3px solid #036eb7;
          line-height: 38px;
          color: #036eb7;
          font-weight: bold;
          span {
            padding-left: 103px;
            color: #999999;
            font-weight: 100;
            font-size: 14px;
          }
        }
        p {
          color: #999999;
          font-weight: 100;
          font-size: 14px;
          line-height: 30px;
          margin-top: 12px;
          span {
            color: #f29600;
          }
        }
      }
    }
  }
  .paging {
    width: 1200px;
    height: 35px;
    margin: 23px auto;
    text-align: center;
  }
  .yingmoo-xxx {
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    background-color: transparent;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
    }
    .column-content {
      width: 1200px;
      background-color: transparent;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .media-model {
        width: 224px;
        height: 235px;
        margin-top: 20px;
        dd {
          background-color: white;
          height: 24px;
          line-height: 24px;
          padding-left: 10px;
        }
        .media-text-first {
          font-size: 15px;
          padding-top: 9px;
          overflow: hidden;
          text-overflow: clip;
          cursor: default;
        }
        .media-text-secend {
          font-size: 12px;
          color: #f29600;
          cursor: default;
        }
        .media-text-city {
          font-size: 12px;
          color: #999999;
          padding-bottom: 6px;
          span {
            padding-left: 15px;
          }
        }
      }
    }
  }
}
</style>
